<script setup>
import { ref, reactive, onBeforeMount, onUnmounted } from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
import axios from 'axios'

let map = null;
let distProvince = null;
let queryTypeLabel = ref()

// 存储当前查询的省份以及查询的等级信息
let districtInfo = reactive({
  // 地区名称 用此变量显示单击对话框
  districtName:'河北省',
  // 地区代码 用此变量向后端查询对应地区贫困风险户状况 向高德请求地区图层
  provinceCode:130000,
  // 图层等级 (2-区县级 1-市级 0-省级)
  districtType:'1',
  // 查询类型 1-需要监测的总用户数量 2-风险户数量 3-需走访的线索数量
  queryType:1
})

// 内部储存信息的格式类似如下所示
// [
//   {
//     districtCode: 130100,
//     poorNum: 6
//   }
// ]
let poorInfo = [];
// [
//   {
//     districtCode: 130100,
//     poorNum: 6
//   },
//   {
//     districtCode: 130200,
//     poorNum: 5
//   },
//   {
//     districtCode: 130300,
//     poorNum: 40
//   },
//   {
//     districtCode: 130400,
//     poorNum: 6
//   },
//   {
//     districtCode: 130500,
//     poorNum: 15
//   },
//   {
//     districtCode: 130600,
//     poorNum: 3
//   },
//   {
//     districtCode: 130700,
//     poorNum: 18
//   },
//   {
//     districtCode: 130800,
//     poorNum: 24
//   },
//   {
//     districtCode: 130900,
//     poorNum: 9
//   },
//   {
//     districtCode: 131000,
//     poorNum: 0
//   },
//   {
//     districtCode: 131100,
//     poorNum: 1
//   }
// ]

onBeforeMount(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "5af5c705c4a2861bff7a88ca1ecc30fe",
  };
  AMapLoader.load({
    key: "73302bf97c925930bc25ff84726f2b9f", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.ToolBar", "AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  }).then((AMap) => {
    map = new AMap.Map("container", {
      // 设置地图容器id
      viewMode: "3D", // 是否为3D地图模式
      zoom: 6, // 初始化地图级别
      center: [116.397428, 39.90923], // 初始化地图中心点位置
    });
    // 绑定点击事件
    map.on('click', handleMapClick);
    switchDistrictLayer();
  })
  .catch((e) => {
    console.log(e);
  });
});

onUnmounted(() => {
  map?.destroy();
});

// 点击地图时根据点击位置决定是否显示弹窗
function handleMapClick(e){
  // 调试时输出更多信息
  // if (process.env.NODE_ENV === 'development') {
  //   let mouseDist = `${e.lnglat.getLng()},${e.lnglat.getLat()}`
  //   console.log(mouseDist)
  // }

  // 根据鼠标经纬度获得鼠标点击位置的行政区信息
  let px = e.pixel;
  let props = distProvince.getDistrictByContainerPos(px);
  // 显示的信息
  let content = [];

  // 点击到国外时props为null
  if(props){
    console.log(props)

    // 点击到当前显示的省份图层时才显示内容
    if(districtInfo.provinceCode == props.adcode_pro){

      // 根据查询等级的不同，输出不同的信息
      let curDisPoorNum = 0;
      // 遍历数组得到对应地区Code的poorNum
      for (let index = 0; index < poorInfo.length; index++) {
        if(poorInfo[index].districtCode == props.adcode)
        curDisPoorNum = poorInfo[index].poorNum;
      }
    
      content = [
        `<div><b>${props.NAME_CHN}</b>`,
        `${queryTypeLabel.value.options[queryTypeLabel.value.selectedIndex].textContent}:${curDisPoorNum}</div>`
      ];
      let infoWindow = new AMap.InfoWindow({
        content: content.join("<br>"), //传入字符串拼接的 DOM 元素
        anchor: "top-left",
      });
    
      infoWindow.open(map, [e.lnglat.getLng(),e.lnglat.getLat()]);
      
    }
  }
}

function handleDistrictNameChange(){
  // 获得修改之后的省份名称
  console.log(districtInfo.districtName)
  // 根据查询的级别(0-省级 1-市级 2-区县级)向后端发送不同的查询请求
  // 省级查询获得全国所有省的
  switchDistrictLayer()
}

function handleQueryLevelChange(){
  // 调用查询与更新函数更新当前地图显示
  switchDistrictLayer()
}

// 查询的贫困户信息类型发生变化的时候调用该函数
function handleQueryTypeChange(){
  
  switchDistrictLayer();
}

// 变更查询图层
async function switchDistrictLayer() {
  await fetchPoorData();
  // 清除之前的图层
  if(distProvince){
    distProvince.setMap(null);
  }

  distProvince = new AMap.DistrictLayer.Province({
    zIndex: 10, //设置图层层级
    zooms: [2, 15], //设置图层显示范围
    adcode: districtInfo.provinceCode, //设置行政区 adcode
    depth: districtInfo.districtType, //设置数据显示层级，0：显示国家面，1：显示省级，当国家为中国时设置depth为2的可以显示市一级
  });

  // 设置图层颜色
  distProvince.setStyles({
    "stroke-width": 2, //描边线宽
    fill: function (data) {
      //设置区域填充颜色，可根据回调信息返回区域信息设置不同填充色
      //回调返回区域信息数据，字段包括 SOC(国家代码)、NAME_ENG(英文名称)、NAME_CHN(中文名称)等
      //国家代码名称说明参考 https://a.amap.com/jsapi_demos/static/demo-center/js/soc-list.json
      return getColorByNum(data.adcode);
    },
    // 'province-stroke': 'cornflowerblue',
    // 'city-stroke': 'white', // 中国地级市边界
    // 'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
  });

  map.add(distProvince);
}

// 根据省份 等级 类型查询贫困户信息并保存到 里
async function fetchPoorData(){
  // console.log('fetching poor data')
  //districtInfo.districtType = distType(districtInfo.provinceCode, districtInfo.districtType)
  await axios
    .get(`http://localhost:8081/riskanalyse/poorDataByType`, {
      params: { 
        districtCode: districtInfo.provinceCode,
        districtType: distType(districtInfo.provinceCode, districtInfo.districtType),
        queryType: districtInfo.queryType
      },
    })
    .then((response) => {
      if (response.data.code === 200) { // 确保请求成功
        // console.log('response success')
        const mapData = response.data.content;
        // console.log(mapData)
        poorInfo = []; // 清空原数组
        // 如果没有返贫风险户
        if(mapData === 0){
          ElMessageBox.alert('该省没有返贫风险户', '信息', {
            // if you want to disable its autofocus
            // autofocus: false,
            confirmButtonText: 'OK',
          })
        }
        for(let i = 0; i < mapData.length; i++){
          poorInfo.push({districtCode:mapData[i].districtCode, poorNum:mapData[i].poorNum})
          // poorInfo.push(mapData[i])
        }
      } else {
        console.error('数据请求失败', response.data.message);
      }
    })
    .catch((error) => {
      console.error('Error fetching risk type data:', error);
    });
}

function distType(dCode, dType){
  // console.log('if before exec, dCode:'+dCode+' dType:' + dType)
  if(dType == '1'){
    let municipalityCode = [110000, 120000, 310000, 500000];
    for(let i = 0; i < municipalityCode.length; i++){
      if(municipalityCode[i] == dCode){
        // console.log(municipalityCode[i]+'the dCode'+dCode)
        return '0';
      }
    }
    return '1';
  } return dType;
}

let totalPoorNum = 0;

// 根据某地区贫困户信息计算显示的颜色
function getColorByNum(currentDistrictCode){
  // console.log(currentDistrictCode)
  totalPoorNum = poorInfo.reduce((acc, item) => acc + item.poorNum, 0);
  // 查找当前的 districtCode 对应的对象
  const district = poorInfo.find(item => item.districtCode == currentDistrictCode);

  // 如果找不到对应的 districtCode，返回默认颜色
  if (!district) {
    return 'gray'; // 默认颜色
  }

  // 计算当前 poorNum 的比例
  const proportion = district.poorNum / totalPoorNum;

  // 基于比例生成颜色，颜色可以从浅色到深色
  const color = getColorFromProportion(proportion);

  return color;
}

// 基于比例生成颜色的辅助函数
function getColorFromProportion(proportion) {
  // 起始颜色和结束颜色，这里用的是从浅红色到深红色
  const startColor = [255, 182, 193]; // 浅红色 (RGB)
  const endColor = [255, 0, 0];       // 深红色 (RGB)

  const r = Math.round(startColor[0] + (endColor[0] - startColor[0]) * proportion);
  const g = Math.round(startColor[1] + (endColor[1] - startColor[1]) * proportion);
  const b = Math.round(startColor[2] + (endColor[2] - startColor[2]) * proportion);

  return `rgb(${r}, ${g}, ${b})`;
}
</script>

<template>
  <div>
    <div id="container"></div>
    <div class="info">
      <h4>选择省份</h4>
        <select name="code-list" id="adcode-list" v-model="districtInfo.provinceCode" @change="handleDistrictNameChange" style="height: 28px;margin-right: 10px;"><option value="110000">北京市</option><option value="120000">天津市</option><option selected="" value="130000">河北省</option><option value="140000">山西省</option><option value="150000">内蒙古自治区</option><option value="210000">辽宁省</option><option value="220000">吉林省</option><option value="230000">黑龙江省</option><option value="310000">上海市</option><option value="320000">江苏省</option><option value="330000">浙江省</option><option value="340000">安徽省</option><option value="350000">福建省</option><option value="360000">江西省</option><option value="370000">山东省</option><option value="410000">河南省</option><option value="420000">湖北省</option><option value="430000">湖南省</option><option value="440000">广东省</option><option value="450000">广西壮族自治区</option><option value="460000">海南省</option><option value="500000">重庆市</option><option value="510000">四川省</option><option value="520000">贵州省</option><option value="530000">云南省</option><option value="540000">西藏自治区</option><option value="610000">陕西省</option><option value="620000">甘肃省</option><option value="630000">青海省</option><option value="640000">宁夏回族自治区</option><option value="650000">新疆维吾尔自治区</option><option value="710000">台湾省</option><option value="810000">香港特别行政区</option><option value="820000">澳门特别行政区</option></select>
      <h4>选择层级</h4>
        <select name="code-list" id="depth-list" v-model="districtInfo.districtType" @change="handleQueryLevelChange" style="height: 28px;margin-right: 10px;">
          <option value="0">0 - 显示省级</option>
          <option value="1">1 - 显示市级</option>
          <option selected="" value="2">2 - 显示区/县级</option>
        </select>
      <h4>选择查询类型</h4>
        <select name="code-list" id="query-list" v-model="districtInfo.queryType" @change="handleQueryTypeChange" ref="queryTypeLabel" style="height: 28px;margin-right: 10px;">
          <option selected="" value="1">需要监测的总用户数量</option>
          <option value="2">风险户数量</option>
          <option value="3">需走访的线索数量</option>
        </select>
    </div>
  </div>
</template>

<style scoped>
#container{
    padding:0px;
    margin: 0px;
    width: 100%;
    height: 90vh;
}

.info {
    z-index: 999;
    width: auto;
    padding: 10px;
    margin-left: 1vh;
    position:fixed;
    top: 10vh;
    background-color: #fff;
    border-radius: 5px;
    font-size: 14px;
    color: #666;
    box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
</style>
